// 导入React相关依赖
import React, { useRef, useState, useEffect } from 'react';
// 导入React Three Fiber核心组件
import { Canvas, useFrame, useThree } from '@react-three/fiber';
// 导入Three.js相关模块
import { 
  MeshStandardMaterial, 
  Group
} from 'three';
// 导入drei辅助组件
import { 
  Text, 
  Box, 
  Sphere, 
  Cylinder,
  Environment,
  ContactShadows,
  PointerLockControls
} from '@react-three/drei';
// 导入样式文件
import './Exhibition3D.css';

// 展览馆场景组件 - 负责构建整个3D展览馆环境
const ExhibitionScene: React.FC = () => {
  // 创建场景组引用，用于整体控制
  const sceneRef = useRef<Group>(null);
  
  // 创建地面材质 - 使用深色大理石纹理效果
  const floorMaterial = new MeshStandardMaterial({ 
    color: '#2a2a2a',
    roughness: 0.8,
    metalness: 0.1
  });
  
  // 创建墙壁材质 - 使用浅色现代材质
  const wallMaterial = new MeshStandardMaterial({ 
    color: '#f5f5f5',
    roughness: 0.6,
    metalness: 0.0
  });
  
  // 创建展台材质 - 使用金属质感
  const pedestalMaterial = new MeshStandardMaterial({ 
    color: '#c0c0c0',
    roughness: 0.3,
    metalness: 0.8
  });

  return (
    <group ref={sceneRef}>
      {/* 环境光照系统 */}
      {/* 环境光 - 提供整体基础照明 */}
      <ambientLight intensity={0.4} />
      {/* 半球光 - 模拟天空光照 */}
      <hemisphereLight 
        color="#87CEEB" 
        groundColor="#8B4513" 
        intensity={0.6} 
      />
      {/* 主定向光 - 模拟太阳光 */}
      <directionalLight
        position={[10, 10, 5]}
        intensity={1.2}
        castShadow
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
        shadow-camera-far={50}
        shadow-camera-left={-20}
        shadow-camera-right={20}
        shadow-camera-top={20}
        shadow-camera-bottom={-20}
      />
      
      {/* 展览馆建筑结构 */}
      {/* 地面 - 主展厅地面 */}
      <Box 
        position={[0, -0.5, 0]} 
        args={[40, 1, 30]} 
        material={floorMaterial}
        receiveShadow
      />
      
      {/* 墙壁系统 */}
      {/* 后墙 */}
      <Box 
        position={[0, 4, -15]} 
        args={[40, 8, 1]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      {/* 左墙 */}
      <Box 
        position={[-20, 4, 0]} 
        args={[1, 8, 30]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      {/* 右墙 */}
      <Box 
        position={[20, 4, 0]} 
        args={[1, 8, 30]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      {/* 前墙（入口墙，留门洞） */}
      <Box 
        position={[-10, 4, 15]} 
        args={[20, 8, 1]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      <Box 
        position={[10, 4, 15]} 
        args={[20, 8, 1]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      
      {/* 天花板 */}
      <Box 
        position={[0, 8.5, 0]} 
        args={[40, 1, 30]} 
        material={wallMaterial}
        castShadow
        receiveShadow
      />
      
      {/* 展台系统 */}
      {/* 中央主展台 */}
      <Box 
        position={[0, 0.5, 0]} 
        args={[3, 1, 3]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      
      {/* 左侧展台 */}
      <Box 
        position={[-8, 0.5, -8]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      <Box 
        position={[-8, 0.5, 0]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      <Box 
        position={[-8, 0.5, 8]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      
      {/* 右侧展台 */}
      <Box 
        position={[8, 0.5, -8]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      <Box 
        position={[8, 0.5, 0]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      <Box 
        position={[8, 0.5, 8]} 
        args={[2, 1, 2]} 
        material={pedestalMaterial}
        castShadow
        receiveShadow
      />
      
      {/* 展品模型 */}
      {/* 中央展品 - 数字人模型 */}
      <DigitalHumanExhibit position={[0, 2, 0]} />
      
      {/* 左侧展品 */}
      <TechExhibit position={[-8, 2, -8]} />
      <AIConceptExhibit position={[-8, 2, 0]} />
      <InnovationExhibit position={[-8, 2, 8]} />
      
      {/* 右侧展品 */}
      <CompanyHistoryExhibit position={[8, 2, -8]} />
      <TeamExhibit position={[8, 2, 0]} />
      <FutureExhibit position={[8, 2, 8]} />
      
      {/* 装饰元素 */}
      {/* 中央吊灯 */}
      <Sphere 
        position={[0, 7, 0]} 
        args={[0.5]} 
        material={new MeshStandardMaterial({ 
          color: '#FFD700',
          emissive: '#FFD700',
          emissiveIntensity: 0.3
        })}
      />
      
      {/* 环境装饰 - 使用简单的环境光代替HDR贴图 */}
      <ContactShadows 
        opacity={0.4} 
        scale={50} 
        blur={2} 
        far={4.5} 
        resolution={256} 
        color="#000000" 
      />
    </group>
  );
};

// 数字人展品组件 - 展示数字人技术
const DigitalHumanExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  // 旋转动画
  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
      meshRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 2) * 0.1;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      {/* 数字人模型占位符 - 使用几何体代替 */}
      <Box args={[1, 2, 0.5]} material={new MeshStandardMaterial({ color: '#4a9eff' })} />
      {/* 展品标签 */}
      <Text
        position={[0, -1.5, 0]}
        fontSize={0.3}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        数字人技术
      </Text>
    </group>
  );
};

// 技术展品组件
const TechExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Sphere args={[0.8]} material={new MeshStandardMaterial({ color: '#ff6b9d' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        AI技术
      </Text>
    </group>
  );
};

// AI概念展品组件
const AIConceptExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.x = Math.sin(state.clock.elapsedTime * 0.8) * 0.2;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Box args={[1, 1, 1]} material={new MeshStandardMaterial({ color: '#6bb6ff' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        智能概念
      </Text>
    </group>
  );
};

// 创新展品组件
const InnovationExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.z += 0.005;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Box args={[0.8, 1.5, 0.8]} material={new MeshStandardMaterial({ color: '#87ceeb' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        创新理念
      </Text>
    </group>
  );
};

// 公司历史展品组件
const CompanyHistoryExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.3) * 0.3;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Cylinder args={[0.6, 0.6, 1.5]} material={new MeshStandardMaterial({ color: '#ffa500' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        公司历史
      </Text>
    </group>
  );
};

// 团队展品组件
const TeamExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 1.5) * 0.05;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Sphere args={[0.7]} material={new MeshStandardMaterial({ color: '#98fb98' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        团队风采
      </Text>
    </group>
  );
};

// 未来展品组件
const FutureExhibit: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const meshRef = useRef<any>();
  
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.x += 0.008;
      meshRef.current.rotation.y += 0.008;
    }
  });
  
  return (
    <group ref={meshRef} position={position}>
      <Box args={[1, 1, 1]} material={new MeshStandardMaterial({ color: '#dda0dd' })} />
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.25}
        color="#333"
        anchorX="center"
        anchorY="middle"
      >
        未来愿景
      </Text>
    </group>
  );
};

// 第一人称控制器组件
const FirstPersonControls: React.FC = () => {
  const { camera, gl } = useThree();
  
  return (
    <PointerLockControls />
  );
};

// 3D展览馆主组件
const Exhibition3D: React.FC<{ onExit: () => void }> = ({ onExit }) => {
  // 控制状态
  const [isLoaded, setIsLoaded] = useState(false);
  const [showInstructions, setShowInstructions] = useState(true);
  
  // 组件挂载时设置加载状态
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
      setShowInstructions(false);
    }, 2000);
    
    return () => clearTimeout(timer);
  }, []);
  
  return (
    <div className="exhibition-3d-container">
      {/* 加载界面 */}
      {!isLoaded && (
        <div className="exhibition-loading">
          <div className="loading-spinner"></div>
          <p>正在加载3D展览馆...</p>
        </div>
      )}
      
      {/* 操作说明 */}
      {showInstructions && (
        <div className="exhibition-instructions">
          <h3>操作说明</h3>
          <p>• 点击屏幕锁定鼠标控制视角</p>
          <p>• WASD键控制移动</p>
          <p>• 鼠标移动控制视角</p>
          <p>• ESC键退出展览馆</p>
          <button onClick={() => setShowInstructions(false)}>开始参观</button>
        </div>
      )}
      
      {/* 退出按钮 */}
      <button className="exhibition-exit-btn" onClick={onExit}>
        退出展览馆
      </button>
      
      {/* 3D场景画布 */}
      <Canvas
        shadows
        camera={{ position: [0, 2, 10], fov: 75 }}
        style={{ width: '100%', height: '100%' }}
      >
        {/* 3D展览馆场景 */}
        <ExhibitionScene />
        
        {/* 第一人称控制器 */}
        <FirstPersonControls />
      </Canvas>
    </div>
  );
};

export default Exhibition3D;
